/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-use-before-define */
import { getDictData } from "@/services/api/module/tenant/developer/dict";
import {
	DrawerForm,
	ProFormDependency,
	ProFormDigit,
	ProFormInstance,
	ProFormSelect,
	ProFormText,
	ProFormTextArea
} from "@ant-design/pro-components";
import React, { useEffect, useRef, useState } from "react";
import { formTitle } from "../constants";
export type DictFormData = Record<string, unknown> & Partial<API.System.DictData>;
export type DictDataFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: DictFormData) => Promise<void>;
	open: boolean;
	id: number | undefined;
	dictType?: string | undefined;
};
const DictDataForm: React.FC<DictDataFormProps> = props => {
	const formRef = useRef<ProFormInstance>();
	const { id, onSubmit, dictType, open, onCancel } = props;
	const colorPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

	// 初始化
	useEffect(() => {
		// 表单重置
		formRef?.current?.resetFields();
		if (id) {
			setFormValue(id);
		}
	}, [id]);

	// 校验是否颜色自定义
	const checkColorCustomer = (color: string) => {
		if (colorPattern.test(color)) {
			return true;
		} else {
			return false;
		}
	};

	// 表单赋值
	const setFormValue = (id: number) => {
		getDictData(id).then(res => {
			const dictData = res.data;
			const color = checkColorCustomer(dictData.color) ? "customer" : dictData.color;
			formRef?.current?.setFieldsValue({
				id: dictData.id,
				dictLabel: dictData.dictLabel,
				dictValue: dictData.dictValue,
				color: color,
				customer: color === "customer" ? dictData.color : null,
				sort: dictData.sort,
				status: dictData.status,
				remark: dictData.remark
			});
		});
	};
	// 关闭表单
	const handleCancel = () => {
		onCancel();
	};
	// 提交表单
	const handleFinish = async (values: Record<string, any>) => {
		values.color = values?.color === "customer" ? values.customer : values?.color;
		// @ts-ignore
		return onSubmit({
			...(values as DictFormData),
			...{ id: id, dictType: dictType }
		});
	};

	return (
		<>
			<DrawerForm<DictFormData>
				title={id ? formTitle[1] : formTitle[0]}
				open={open}
				width="500"
				autoFocusFirstInput
				formRef={formRef}
				layout="vertical"
				onFinish={handleFinish}
				drawerProps={{
					destroyOnClose: true,
					onClose: () => {
						handleCancel();
					}
				}}
			>
				<ProFormText
					name="dictLabel"
					label="字典标签"
					placeholder="请输入字典标签"
					rules={[
						{
							required: true
						}
					]}
				/>
				<ProFormText
					name="dictValue"
					label="字典键值"
					placeholder="请输入字典键值"
					rules={[
						{
							required: true
						}
					]}
				/>
				<ProFormDigit
					min={0}
					max={9999}
					name="sort"
					label="排序"
					initialValue={0}
					placeholder="请输入显示顺序"
					rules={[
						{
							required: true,
							message: "请输入显示顺序！"
						}
					]}
				/>
				<ProFormSelect
					name="color"
					label="回显样式"
					options={[
						{ label: "默认(default)", value: "default" },
						{ label: "主要(processing)", value: "processing" },
						{ label: "成功(success)", value: "success" },
						{ label: "警告(warning)", value: "warning" },
						{ label: "错误(error)", value: "error" },
						{ label: "自定义(customer)", value: "customer" }
					]}
				/>
				<ProFormDependency name={["color"]}>
					{({ color }) => {
						return (
							<ProFormText
								name="customer"
								hidden={color !== "customer"}
								label="自定义样式"
								placeholder="输入16进制颜色"
								rules={[
									{
										pattern: colorPattern,
										message: "请输入正确的16进制颜色"
									}
								]}
							/>
						);
					}}
				</ProFormDependency>
				<ProFormTextArea name="remark" label="备注" placeholder="请输入名称" />
			</DrawerForm>
		</>
	);
};
export default DictDataForm;
